<template>
  <s-layout title="门店详情">
    <swiper class="swiper" :circular="true" :autoplay="true" :interval="3000">
      <swiper-item v-for="item in 3" :key="item">
        <view class="swiper-item">
          <image
            :src="`https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/merchant/banner/banner${item}.png`"
            mode="widthFix"
          />
        </view>
      </swiper-item>
    </swiper>
    <!-- 店铺信息卡片 -->
    <div class="shop_info_card">
      <!-- 店铺名称 -->
      <div class="shop_name">本地生活商家名称如果名称真的太长需要换行处理，页面需要自适应</div>

      <!-- 评分区域 -->
      <div class="shop_rating">
        <uni-rate
          :value="3.6"
          :size="16"
          :readonly="true"
          allow-half
          color="#e8e8e8"
          active-color="#006cd9"
        />
        <span class="rating_score">3.6</span>
      </div>

      <!-- 营业时间 -->
      <div class="shop_business_hours">
        <div class="label">营业中: </div>
        <div class="time">9:30 - 22:00</div>
        <div class="phone_icon">
          <image
            src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/icon/%E8%B7%AF%E5%BE%84%404x.png"
            mode="aspectFill"
          />
        </div>
      </div>

      <!-- 地址信息 -->
      <div class="shop_address">
        <div class="address_text">萧山区民和路630-10号民和路630-10号民和路...</div>
        <div class="navigation_icon">
          <image
            src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/icon/%E8%B7%AF%E5%BE%84%404x%20(1).png"
            mode="aspectFill"
          />
        </div>
      </div>
    </div>

    <!-- 店铺资质区域 start -->
    <div class="shop_qualification">
      <div class="shop_qualification_card">
        <div class="qualification_item" @click="view_qualification">
          <div class="item_text">查看食品安全档案/营业执照</div>
          <div class="qualification_icon">
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/icon/right.png"
              mode="widthFix"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 店铺资质区域 end -->

    <!-- 团购套餐卡片 -->
    <div class="tuangou_list">
      <div class="package_card_title">
        <div class="ico">套</div>
        <div class="package_card_title_text">团购套餐</div>
      </div>

      <div v-for="item in 4" :key="item">
        <package-card
          :logo_url="`http://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/home/groop/${item}.png`"
          title="名称团购套餐名称团购套餐名称名称团购套餐名称团购套餐名称名称团购套餐名称团购套餐名称"
          available_time="周一至周日 可用"
          current_price="12.8"
          original_price="29.8"
          @click="sheep.$router.go('/pages/tuangou/tuangou_info')"
        />
      </div>
    </div>

    <!-- 用户推荐 店铺列表-->
    <div class="tuijian_list">
      <div class="package_card_title">
        <div class="package_card_title_text">用户推荐</div>
      </div>

      <div v-for="item in 4" :key="item">
        <shop-card
          :logo_url="`http://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/home/groop/${item}.png`"
          shop_name="茶欣悦色（博地中心店）茶欣悦咖啡..."
          :rating="4.6"
          address="西湖区德宝百货德宝..."
          distance="1.2km"
          tag_text="团购套餐名称的套餐名称简..."
          @click="sheep.$router.go('/pages/tuangou/shop_info')"
        />
      </div>
    </div>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import PackageCard from '@/components/package-card.vue';
  import ShopCard from '@/components/shop-card.vue';
  // 查看资质方法
  const view_qualification = () => {
    console.log('查看资质');
    // 这里可以添加查看资质的逻辑
  };
</script>

<style lang="less" scoped>
  image {
    display: block;
    width: 100%;
    height: 100%;
  }

  .swiper {
    height: 400rpx;
    width: 100%;
    z-index: -1;
    position: relative;

    .swiper-item {
      width: 100%;
      height: 100%;
    }
  }

  .shop_info_card {
    background-color: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin: -6px 10px 10px 10px;
  }

  .shop_name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 12rpx;
    line-height: 1.4;
  }

  .shop_rating {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;

    .rating_score {
      margin-left: 8px;
      color: #666;
      font-size: 14px;
    }
  }

  .shop_business_hours {
    display: flex;
    margin-bottom: 20rpx;
    font-size: 14px;
    color: #666;
    align-items: center;
    justify-content: space-between;
    // border: 1px solid red;

    .label {
      margin-right: 5px;
    }

    .time {
      color: #333;
      flex: 1;
    }

    .phone_icon {
      width: 25px;
      height: 25px;
      border-radius: 50%;
    }
  }

  .shop_address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
    // border: 1px solid red;

    .address_text {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .navigation_icon {
      width: 25px;
      height: 25px;
      border-radius: 50%;
    }
  }

  .shop_qualification_card {
    background-color: white;
    padding: 15px;
    margin: 0 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .qualification_item {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item_text {
        font-size: 14px;
        color: #333;
      }

      .qualification_icon {
        width: 15rpx;
        height: 15rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .tuangou_list {
    margin: 10px;
    background-color: #fff;
    border-radius: 10px;

    .package_card_title {
      padding: 15px 10px 10px 10px;
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      display: flex;
      align-items: center;

      .ico {
        width: 50rpx;
        height: 50rpx;
        margin-right: 10rpx;
        line-height: 50rpx;
        background-color: #ff4d4f;
        color: white;
        font-size: 26rpx;
        text-align: center;
      }
    }
  }
  /* 团购套餐卡片样式 */
  .package_card {
    background-color: white;
    border-radius: 8px;
    padding: 20rpx;
    display: flex;

    // border: 1px solid red;

    .package_left {
      margin-right: 10px;
      // border: 1px solid red;

      .shop_logo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: white;
        border: 1px solid #f0f0f0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        .logo_image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .package_right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // border: 1px solid red;
      overflow: hidden;

      .package_title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        margin-bottom: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .package_features {
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;

        .feature {
          color: #666;
        }

        .dot {
          margin: 0 3px;
          color: #999;
        }
      }

      .package_time {
        font-size: 12px;
        color: #666;
        margin-bottom: 8px;
      }

      .package_price_row {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price_info {
          display: flex;
          align-items: baseline;

          .current_price {
            font-size: 18px;
            font-weight: bold;
            color: #ff4d4f;
          }

          .original_price {
            font-size: 12px;
            color: #999;
            text-decoration: line-through;
            margin-left: 5px;
          }
        }

        .buy_button {
          background-color: #ff4d4f;
          color: white;
          font-size: 12px;
          padding: 6px 12px;
          border-radius: 20px;
        }
      }
    }
  }

  // 推荐列表
  .tuijian_list {
    margin: 10px;
    border-radius: 10px;
    background-color: #fff;

    .package_card_title {
      padding: 10px;
      font-size: 32rpx;
      color: #000000;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
  }

  /* 推荐店铺卡片样式 */
  .shop_card {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 8px;

    .shop_card_content {
      display: flex;
      align-items: flex-start;
    }

    .shop_avatar {
      width: 210rpx;
      height: 210rpx;
      margin-right: 15rpx;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .shop_info {
      flex: 1;
      min-width: 0; // 防止文本溢出
    }

    .shop_header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 8px;

      .shop_name {
        flex: 1;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .shop_distance {
        font-size: 12px;
        color: #999;
        flex-shrink: 0;
      }
    }

    .rating_row {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .rating_score {
        margin-left: 8px;
        font-size: 14px;
        color: #006cd9;
      }
    }

    .address_row {
      font-size: 12px;
      color: #666;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .address_text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
      }
    }

    .tag_row {
      display: inline-flex;
      align-items: center;
      .ico {
        width: 50rpx;
        height: 50rpx;
        margin-right: 10rpx;
        line-height: 50rpx;
        background-color: #ff4d4f;
        color: white;
        font-size: 26rpx;
        text-align: center;
      }
      .tag_text {
        font-size: 12px;
        color: #666;
        background-color: #f5f5f5;
        padding: 4px 8px;
        border-radius: 4px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
</style>
